<template>
	<view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
	<view class="container">
		<!-- 提交确认窗口 -->
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="返回修改" confirmText="确认提交" title="请核对信息"
					content="欢迎使用 uni-popup!" @confirm="dialogConfirm" @close="dialogClose">
					<view class="containerhs">
						<view class="form-items">
							<text class="label">姓名：</text>
							<text class="value">{{uname}}</text>
						</view>
						<view class="form-items">
							<text class="label">手机号：</text>
							<text class="value">{{unumber}}</text>
						</view>
						<view class="form-items">
							<text class="label">上门地址：</text>
							<text class="value">{{uaddress}}</text>
						</view>
						<view class="form-items">
							<text class="label">户型面积：</text>
							<text class="value">{{uhousearea}}</text>
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<!-- 用户信息 -->
		<view class="user-info">
			<text class="name">{{sname}}</text>
			<view class="date">自{{stime}}</view>
			<text class="change-time" @click="changeTime">更改时段</text>
		</view>
		<!-- 表单 -->
		<view class="form">
			<view class="instruction">请你填写资料，带*号为必填项</view>
			<view class="form-item">
				<text class="label">*姓名：</text>
				<input class="input" type="text" v-model="uname" placeholder="请填写姓名" />
			</view>
			<view class="form-item">
				<text class="label">*手机号：</text>
				<input class="input" type="number" maxlength="11" data-type="number" @input="handleInput"
					placeholder="请填写手机号" />
			</view>
			<view class="form-item">
				<text class="label">*家庭地址：</text>
				<uni-easyinput type="textarea" autoHeight v-model="uaddress" placeholder="请填写家庭地址"></uni-easyinput>

			</view>
			<view class="form-item">
				<text class="label">*户型面积：</text>
				<input class="input" type="text" v-model="uhousearea" placeholder="请填写户型面积" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-button" @click="submitForm">提交预约</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	import {
		gonavigateTo,
		showToast
	} from '@/request/wx.js';

	import {
		getbyid,
		getDateById,
		getTimeById,
		addAppointment
	} from '@/request/api.js';


	const stime = ref('');
	const sname = ref('');

	const uname = ref('');
	const unumber = ref('');
	const uaddress = ref('');
	const uhousearea = ref('');
	const sid = ref('');
	const sdateid = ref('');
	const stimeid = ref('');

	const msgType = ref('warning'); // 可以根据需要设置为 'success', 'error', 
	const alertDialog = ref(null);
	const message = ref(null);
	const messageText = ref('');
	const token = ref(null);

	const getToken = () => { // 获取本地存储的token
		const storedToken = uni.getStorageSync('token');
		token.value = storedToken || '';
	};

	//显示时间或家政信息
	onLoad(async (e) => {
		console.log("id", e);
		sid.value = e.sid;
		sdateid.value = e.sdateid;
		stimeid.value = e.stimeid;
		try {
			getToken();
			const response = await getbyid({ //获取家政信息
				'id': sid.value
			});
			// console.log("sid:", response.data.data.name);
			const req = await getDateById({ // 获取日期
				'id': sdateid.value
			});
			let date = new Date(req.data.data.date);
			let year = date.getFullYear();
			let month = (date.getMonth() + 1).toString().padStart(2, '0');
			let day = date.getDate().toString().padStart(2, '0');
			// console.log("req", `${year}年${month}月${day}日`);
			const reql = await getTimeById({ //获取时间
				'id': stimeid.value
			});
			// console.log("reql", reql.data.data.time);
			sname.value = response.data.data.name;
			stime.value = `${year}年${month}月${day}日` + "  " + reql.data.data.time

		} catch (error) {
			console.error("请求失败:", error);
		}
	});

	function handleInput(event) {
		// console.log(event.detail.value)
		unumber.value = event.detail.value.replace(/\s+/g, '');
	}

	function submitForm() { //打开弹层
		if (uname.value.replace(/\s+/g, '') === '') {
			showToast("请填写姓名",2000)
			console.log("请填写姓名");
			return
		}
		if (unumber.value.replace(/\s+/g, '') === '') {
			console.log(unumber.value);
			showToast("请填写手机号码",2000)
			console.log("请填写手机号码");
			return
		}
		if (uaddress.value.replace(/\s+/g, '') === '') {
			console.log("请填写家庭地址");
			return
		}
		if (uhousearea.value.replace(/\s+/g, '') === '') {
			console.log("请填写用户面积");
			showToast("请填写用户面积",2000)
			return
		}
		console.log("token.value:" + token.value)
		console.log("uname.value:" + uname.value.replace(/\s+/g, ''));
		console.log("unumber.value:" + unumber.value.replace(/\s+/g, ''));
		console.log("uaddress.value:" + uaddress.value.replace(/\s+/g, ''));
		console.log("uhousearea.value:" + uhousearea.value.replace(/\s+/g, ''));
		alertDialog.value.open()
	}

	const dialogClose = () => { // 关闭对话框事件
		console.log('对话框被关闭');
		// 对话框关闭时可以执行的操作
	};

	const dialogConfirm = () => { // 确认按钮点击事件
		if (!token.value) {
			console.log("还未登录");
			showToast("你还未登录",2000)
			return
		}
		const u = {
			'uid': token.value,
			'sid': sid.value,
			'sdateid': sdateid.value,
			'stimeid': stimeid.value,
			'customername': uname.value,
			'contactphone': unumber.value,
			'address': uaddress.value,
			'housearea': uhousearea.value,
		};
		addAppointment(u).then((res) => {
			console.log(res);
			if (res.data.code === 200) {
				message.value.open()
				messageText.value = res.data.msg
				setTimeout(() => {
					uni.redirectTo({
					  url: '/pages/user/appointment/appointment?event=${sort}' // 需要跳转的目标页面路径
					});
					// gonavigateTo('/pages/user/appointment/appointment?event=${sort}');
				}, 2000); // 2000 毫秒后执行，即两秒后
				console.log('确认按钮被点击');
			} else {
				message.value.open()
				messageText.value = res.data.msg
			}
		});
	};

	function changeTime() { //跳转到预约
		// gonavigateTo(`/pages/user/details/subscribe?id=${sid.value}`);
		wx.navigateBack({
			delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
		});
	}
</script>

<style>
	.containerhs {
		padding: 20px;
	}

	.form-items {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.label {
		font-weight: bold;
	}

	.value {
		margin-left: 10px;
	}

	.instruction {
		border-bottom: 1px solid #ccc;
		text-align: center;
		/* 文本居中 */
		margin: 10px 0 30px;
		/* 上下外边距，增加底部外边距以拉开与后续内容的距离 */
		padding: 10px 0 20px;
		/* 上下内边距，增加底部内边距以拉开与线的距离 */
		color: #333;
		/* 设置文本颜色 */
		font-size: 17px;
		/* 设置文本大小 */
		width: 100%;
		/* 确保文本和线占满整个容器宽度 */
	}

	.container {
		background-color: #f5f5f5;
		/* 这里可以设置你想要的任何颜色 */
		min-height: 100vh;
		/* 确保容器至少和视口一样高 */
	}

	.container {
		padding: 20px;
	}

	.user-info {
		margin-bottom: 20px;
		background-color: white;
		padding: 10px;
		border-radius: 15px;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
	}

	.date {
		color: #666;
		margin-top: 5px;
	}

	.change-time {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		background-color: #fde6d2;
		color: #f37b1d;
		border: none;
		padding: 5px;
		font-size: 12px;
		width: 20%;
		border-radius: 10px;
		margin-top: 5px;
	}

	.form {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.form-item {
		margin-bottom: 15px;
	}

	.label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.submit-button {
		width: 100%;
		padding: 10px;
		background-color: #7B61FF;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
	}
</style>